.btn {
  transition: 0.2s ease-in-out;
  transition-property: border, background, box-shadow, color;
  background: var(--button-background, var(--button-default-background, none));
  border-color: var(--button-border-color, var(--button-default-border-color, transparent));
  color: var(--button-color, var(--button-default-color));
  --loader-color: var(--button-color, var(--button-default-color));

  & .icon {
    width: 1em;
    height: 1em;
    font-size: 1.5rem;
  }

  &.xsmall {
    height: 1.5rem;
    padding: 0 0.5rem;
    border-radius: 0.5rem;
  }

  &.small {
    height: 2rem;
    padding: 0 0.75rem;
    border-radius: 0.63rem;
  }

  &.medium {
    height: 2.5rem;
    padding: 0 1.25rem;
    border-radius: 0.75rem;
  }

  &.large {
    height: 3rem;
    padding: 0 1.5rem;
    border-radius: 0.88rem;
  }

  &.headline {
    height: 3rem;
    padding: 0 1.5rem;
    font-size: 1.0625rem;
    border-radius: 0.875rem;
    color: var(--theme-text-primary);
  }

  &.bg-accent-cabbage-default {
    color: #FFFFFF;
  }

  &:not(.iconOnly) {
    & .icon {
      margin-left: -0.5rem;
      margin-right: 0.25rem;

      &:not(:first-child) {
        margin-left: 0.25rem;
        margin-right: -0.5rem;
      }

      &:only-child {
        margin-right: -0.5rem;
      }
    }

    & .socialIcon {
      margin-right: 0.75rem;
    }
  }

  &.iconOnly {
    &.xsmall {
      width: 1.5rem;
      padding: 0;
      border-radius: 0.5rem;
    }

    &.small {
      width: 2rem;
      padding: 0;
      border-radius: 0.63rem;
    }

    &.medium {
      width: 2.5rem;
      padding: 0;
      border-radius: 0.75rem;
    }

    &.large {
      width: 3rem;
      padding: 0;
      border-radius: 0.88rem;
    }

    &.xlarge {
      width: 4rem;
      height: 4rem;
      padding: 0;
      border-radius: 1.375rem;
    }
  }

  &[aria-busy='true'] {
    pointer-events: none;

    & > * {
      visibility: hidden;
    }

    & .btn-loader {
      display: block;
      visibility: unset;
    }
  }

  &:not(:focus-visible) {
    box-shadow: var(--button-box-shadow, var(--button-default-box-shadow, none));
  }

  &[aria-pressed="true"] {
    --button-background: var(--button-pressed-background);
    --button-border-color: var(--button-pressed-border-color);
    --button-color: var(--button-pressed-color);
    --button-box-shadow: var(--button-pressed-box-shadow);
  }

  &:not(.readOnly) {
    &:hover, &.hover, &:focus:focus-visible {
      --button-background: var(--button-hover-background);
      --button-border-color: var(--button-hover-border-color);
      --button-color: var(--button-hover-color);
      --button-box-shadow: var(--button-hover-box-shadow);
    }

    &.ping {
      position: relative;

      &::before {
        content: '';
        z-index: -1;
        position: absolute;
        inset: -2px;
        background: inherit;
        border-radius: inherit;
        animation: fast-ping 1s ease-in-out infinite;
      }
    }
  }


  &:active {
    --button-background: var(--button-active-background);
    --button-border-color: var(--button-active-border-color);
    --button-color: var(--button-active-color);
    --button-box-shadow: var(--button-active-box-shadow);
  }

  &.readOnly {
    --button-border-color: var(--button-disabled-border-color);
    --button-box-shadow: var(--button-disabled-box-shadow);

    pointer-events: none;
    cursor: default;
  }

  &[disabled] {
    --button-background: var(--button-disabled-background);
    --button-border-color: var(--button-disabled-border-color);
    --button-color: var(--button-disabled-color);
    --button-box-shadow: var(--button-disabled-box-shadow);

    pointer-events: none;
    cursor: default;
  }
}

.btn-quaternary {
  & label {
    color: var(--button-color, var(--button-default-color));
    transition: 0.2s ease-in-out;
    transition-property: color;
  }

  & [aria-pressed="true"] ~ label {
    color: var(--button-pressed-color);
  }

  & :hover ~ label, & .hover ~ label, & :focus:focus-visible ~ label {
    color: var(--button-hover-color);
  }

  & :active ~ label {
    color: var(--button-active-color);
  }

  & [disabled] ~ label {
    color: var(--button-disabled-color);
  }

  & [disabled] ~ label {
    pointer-events: none;
  }

  &.reverse {
    flex-direction: row-reverse;

    & > label {
      padding-left: 1.5rem;
      padding-right: 0.25rem;
    }

    &.small > label {
      padding-left: 1rem;
    }

    &.large > label {
      padding-left: 2rem;
    }
  }
}

.btn-tag {
  color: var(--button-color, var(--button-default-color));

  & .icon {
    color: var(--button-icon, var(--button-default-icon, none));
  }

  &[aria-pressed="true"] {
    --button-background: var(--button-pressed-background);
    --button-icon: var(--button-hover-icon);
  }

  &:hover, &.hover, &:focus:focus-visible {
    --button-icon: var(--button-hover-icon);
  }

  &:active {
    --button-background: var(--button-pressed-background);
    --button-icon: var(--button-hover-icon);
  }
}

.btn-tagBlocked {
  color: var(--button-color, var(--button-default-color));

  & .icon {
    color: var(--button-icon, var(--button-default-icon, none));
  }

  &[aria-pressed="true"] {
    --button-background: var(--button-pressed-background);
    --button-icon: var(--button-hover-icon);
  }

  &:hover, &.hover, &:focus:focus-visible {
    --button-icon: var(--button-hover-icon);
  }

  &:active {
    --button-background: var(--button-pressed-background);
    --button-icon: var(--button-hover-icon);
  }
}

.btn-signback {
  @apply flex flex-row items-center p-3 py-2 w-full rounded-12 bg-text-primary;

  padding: 0.5rem 0.75rem 0.5rem 0.75rem !important;
  height: 3.25rem;

  > * > svg {
    margin: 0 !important;
  }

  &:hover {
    background: var(--button-hover-background);
    border-color: var(--button-hover-border-color);
    color: var(--button-hover-color);
    box-shadow: var(--button-hover-box-shadow);
  }
}

.btn-quiz {
  @apply !border-solid border-border-subtlest-tertiary;
  @apply rounded-10 !px-4;
  @apply bg-surface-hover hover:bg-surface-active;
  @apply text-text-primary;

  &.simplified {
    @apply bg-[unset];
  }

  &:is([aria-pressed="true"], [aria-checked="true"]) {
    @apply bg-brand-active;
    @apply border-brand-default;
  }
}

@keyframes fast-ping {
  0% {
    width: 100%;
    height: 100%;
    opacity: 0;
  }

  45% {
    top: -0.125rem;
    left: 0;
    width: calc(100% + 0.25rem);
    height: calc(100% + 0.25rem);

    opacity: 1;
  }

  100% {
    top: -0.75rem;
    left: -0.75rem;
    width: calc(100% + 1.5rem);
    height: calc(100% + 1.5rem);
    opacity: 0;
  }
}
